
<div ngIf="viewModel === 0">
  <div nz-row >
    <div nz-col nzSpan="24">
      <nz-table #basicTable [nzData]="addressList">
        <thead>
          <tr>
            <th>联系人</th>
            <th>联系电话</th>
            <th>地址</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr *ngFor="let data of basicTable.data">
            <td>{{data.contactName}}</td>
            <td>{{data.phone}}</td>
            <td>{{data.province}} {{data.city}} {{data.county}} {{data.detail}}</td>
            <td>
              <a><i class="anticon anticon-edit"></i></a>
              <nz-divider nzType="vertical"></nz-divider>
              <a><i class="anticon anticon-delete"></i></a>
            </td>
          </tr>
        </tbody>
      </nz-table>
    </div>
  </div>
</div>

<div ngIf="viewModel === 1">

  <div nz-row class="ray-row">
    <div nz-col nzSm="24" nzMd="16">
      <nz-input-group [nzSuffix]="suffixTemplate" nzPrefixIcon="anticon anticon-profile">
        <input type="text" nz-input placeholder="联系人" [(ngModel)]="addree.contactName">
      </nz-input-group>
      <ng-template #suffixTemplate>
        <i class="anticon anticon-info-circle ray-warning" *ngIf="addree.contactName == ''"></i>
        <i class="anticon anticon-check-circle text-success" *ngIf="addree.contactName !== ''"></i>
      </ng-template>
    </div>
  </div>

  <div nz-row class="ray-row">
    <div nz-col nzSm="24" nzMd="16">
      <nz-input-group [nzSuffix]="suffixTemplate" nzPrefixIcon="anticon anticon-phone">
        <input type="text" nz-input placeholder="联系电话" [(ngModel)]="addree.phone">
      </nz-input-group>
      <ng-template #suffixTemplate>
        <i class="anticon anticon-info-circle ray-warning" *ngIf="addree.phone == ''"></i>
        <i class="anticon anticon-check-circle text-success" *ngIf="addree.phone !== ''"></i>
      </ng-template>
    </div>
  </div>

  <div nz-row class="ray-row">
    <div nz-col nzSm="8" nzMd="4">
      <nz-input-group [nzSuffix]="suffixTemplate">
        <input type="text" nz-input placeholder="省" [(ngModel)]="addree.province">
      </nz-input-group>
      <ng-template #suffixTemplate>
        <i class="anticon anticon-info-circle ray-warning" *ngIf="addree.province == ''"></i>
        <i class="anticon anticon-check-circle text-success" *ngIf="addree.province !== ''"></i>
      </ng-template>
    </div>

    <div nz-col nzSm="8" nzMd="4">
      <nz-input-group [nzSuffix]="suffixTemplate">
        <input type="text" nz-input placeholder="市" [(ngModel)]="addree.city">
      </nz-input-group>
      <ng-template #suffixTemplate>
        <i class="anticon anticon-info-circle ray-warning" *ngIf="addree.city == ''"></i>
        <i class="anticon anticon-check-circle text-success" *ngIf="addree.city !== ''"></i>
      </ng-template>
    </div>

    <div nz-col nzSm="8" nzMd="4">
      <nz-input-group [nzSuffix]="suffixTemplate">
        <input type="text" nz-input placeholder="县" [(ngModel)]="addree.county">
      </nz-input-group>
      <ng-template #suffixTemplate>
        <i class="anticon anticon-info-circle ray-warning" *ngIf="addree.county == ''"></i>
        <i class="anticon anticon-check-circle text-success" *ngIf="addree.county !== ''"></i>
      </ng-template>
    </div>
  </div>

  <div nz-row class="ray-row">
    <div nz-col nzSm="24" nzMd="16">
      <nz-input-group [nzSuffix]="suffixTemplate" >
        <input type="text" nz-input placeholder="详细地址" [(ngModel)]="addree.detail">
      </nz-input-group>
      <ng-template #suffixTemplate>
        <i class="anticon anticon-info-circle ray-warning" *ngIf="addree.detail == ''"></i>
        <i class="anticon anticon-check-circle text-success" *ngIf="addree.detail !== ''"></i>
      </ng-template>
    </div>
  </div>

</div>
